<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3c.org/TR/html4/strict.dtd">
<html>
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<link href="http://www.jianyou.com/css/base.css" rel="stylesheet" type="text/css" />
		<link href="http://www.jianyou.com/css/panel.css" rel="stylesheet" type="text/css" />
		<style type="text/css">
			#miller-console{
				width: 200px;
				position: absolute;
				top:20px;
				right: 20px;
				background: #273A4B;
				padding: 5px;
				border-radius: 5px;
				box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.5);
			}
			#miller-console .hd{
				color: #fff;
				font-weight: bold;
				padding-bottom: 2px;
				border-bottom: 1px solid #CB5A1F;
				cursor: pointer;
			}

			#miller-console .bd{
				min-height: 300px;
				color: #7BC22F;
				font-size: 12px;
				padding: 5px;
			}
			#miller-console .ft{
				color: #aaa;
				font-weight: bold;
				padding-top: 2px;
				border-top: 1px solid #CB5A1F;
			}
			#miller-console .ft .action{
				cursor: pointer;
				font-size: 10px;
			}
		</style>
		<script src="http://www.jianyou.com/js/base.js"></script>
        <script src="http://www.jianyou.com/js/core/jQuery.js"></script>
		<script type="text/javascript" src="http://www.jianyou.com/js/core/panel/Panel.js"></script>
		<script type="text/javascript" src="http://www.jianyou.com/js/core/panel/Mask.js"></script>
		<script type="text/javascript" src="http://www.jianyou.com/js/core/panel/Dialog.js"></script>
		<script type="text/javascript" src="http://www.jianyou.com/js/core/panel/MessageBox.js"></script>
		<script type="text/javascript" src="http://www.jianyou.com/js/core/panel/Window.js"></script>
	</head>
	<body>
		<h1>Dialog测试</h1>
		<style type="text/css">
			.cls{zoom:1;}
			.cls:after{content:'.';display:block;height:0;visibility:hidden;clear:both;}
			.args{background:#eee;padding:10px 0 10px 50px;border-bottom:1px solid #999;margin-top: 20px;}
			.args li{margin: 5px;list-style:none;}
			.args li .k{display:inline-block;width: 100px;text-align:right;padding-right:5px;}
		</style>
		<div class="args">
			<h3>参数</h3>
			<ul>
				<li class="cls">
					<span class="k"><label>Left:</label></span><span class="v"><input id="leftVal" value="0"></span>
				</li>
				<li class="cls">
					<span class="k"><label>Top:</label></span><span class="v"><input id="topVal" value="0"></span>
				</li>
				<li class="cls">
					<span class="k"><label>Height:</label></span><span class="v"><input id="heightVal" value="200"></span>
				</li>
				<li class="cls">
					<span class="k"><label>Width:</label></span><span class="v"><input id="widthVal" value="200"></span>
				</li>
				<li class="cls">
					<span class="k"><label>是否居中:</label></span>
					<span class="v">
						<select id="atCenterVal"><option value="1">是</option><option value="0">否</option></select>
					</span>
				</li>
				<li class="cls">
					<span class="k"><label>是否使用iframe:</label></span>
					<span class="v">
						<select id="useIframeVal"><option value="2">自动</option><option value="1">是</option><option value="0">否</option></select>
					</span>
				</li>
				<li class="cls">
					<span class="k"><label>是否使用mask:</label></span>
					<span class="v">
						<select id="useMaskVal"><option value="1">是</option><option value="0">否</option></select>
					</span>
				</li>
				<li class="cls">
					<span class="k"><label>是否使用标题:</label></span>
					<span class="v">
						<select id="useHeadVal"><option value="1">是</option><option value="0">否</option></select>
					</span>
				</li>
				<li class="cls">
					<span class="k"><label>标题:</label></span><span class="v"><input id="titleVal" value="这是一个标题啊啊"></span>
				</li>
				<li class="cls">
					<span class="k"><label>内容:</label></span>
					<span class="v"><textarea id="contentVal" cols="40">这是内容容啊啊</textarea>
				</span>
				</li>
				<li class="cls">
					<span class="k"><label>样式:</label></span>
					<span class="v">
						<select id="classNameVal">
							<option value="panel-t1">panel-t1</option>
							<option value="panel-t3">panel-t3</option>
						</select>
					</span>
				</li>
				<li class="cls">
					<span class="k"><label></label></span>
					<span class="v">
						<button id="showDialog">Show</button>&nbsp;&nbsp;<button id="hideDialog">Hide</button>
					</span>
				</li>
			</ul>
		</div>
		<button id="noBlurBtn">点击此按钮不会自动关闭窗口</button>
		内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>
		内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>
		<div id="miller-console">
			<div class="hd" onclick="$( '#miller-console .bd,#miller-console .ft' ).toggle();">::控制台::</div>
			<div class="bd"></div>
			<div class="ft"><span class="action" onclick="MC.clear();">清空</span></div>
		</div>
	</body>
	<script type="text/javascript">
		var MC = {
			cs: function(){
				return $( '#miller-console .bd' );
			},
			log: function( msg ){
				var item = $( '<div class="log"/>' )
							.html( '>&nbsp;' + msg );
				this.cs().append( item );
				item[0].scrollIntoView();
			},
			clear: function( ){
				this.cs().html( '');
			}
		};

		K.App('ADialogTest',['core/panel/Dialog','jQuery']).define({
			main: function(){
				var Dialog = this.require( 'core/panel/Dialog' ),
					$ = this.require( 'jQuery' );

				window.$ = $;

				function getOpts(){
					var optArr = 'top,left,height,width,atCenter,useIframe,useMask,useHead,useFoot,title,className,content'.split(','),
						opts = {};
					K.forEach(optArr, function(opt){
						var val = $('#' + opt + 'Val').val();
						if( opt == 'top' || opt == 'left' || opt == 'height' || opt == 'width' ){
							val = parseInt( val );
						}
						if( opt == 'atCenter' || opt == 'useMask' || opt == 'useHead' ){
							val = !!parseInt( val );
							opts[ opt ] = val;
						}
						else if( opt == 'useIframe' ){
							val = parseInt( val );
							if( val != 2 ){
								val = !!val;
								opts[ opt ] = val;
							}
						}
						else{
							opts[ opt ] = val;
						}
					});
					return opts;
				}

				$('#showDialog').click(function(){
					var opts = getOpts();
					window.dlg = new Dialog( opts );
					window.dlg.addNoBlurList( $( '#noBlurBtn' ) );
					window.dlg.addNoBlurList( $( '.args' ) );
					window.dlg.show();
				});
				$('#hideDialog').click(function(){ window.dlg.hide();});
			}
		});
	//]]>
	</script>
</html>
